
$mobile-bg-height: 260px;

.user-page-container {
    position: relative;
    .setting-wrapper {
        position: absolute;
        top: 30px;
        right: 0;
        cursor: pointer;
        z-index: 11;
        .icon {
            color: rgba(255,255,255,.5);
            font-size: 20px;
        }
    }
    .header-box{
        width: 100%;
        height: 350px;
    }

    .header-bg{
        width: 100%;
        height: 350px;
        background-image: url("./img/new-top.png");
        background-size: auto 350px;
        background-repeat: no-repeat;
        background-position: center top;

        @media screen and (max-width: 768px) {
            background-size: auto $mobile-bg-height;
            height: $mobile-bg-height;
        }
    }

    .count-box-hover:hover{
        border-radius: 10px;
        background-color: #e9efff;
    }

    .title-text{
        font-size: 16px;
        color: #303133;
    }

    .suffix-text{
        font-size: 14px;
        color: #bbbbbb;
    }

    .menu-wrapper {
        position: relative;
        .ant-menu-horizontal > .ant-menu-item:hover, .ant-menu-horizontal > .ant-menu-submenu:hover, .ant-menu-horizontal > .ant-menu-item-active, .ant-menu-horizontal > .ant-menu-submenu-active, .ant-menu-horizontal > .ant-menu-item-open, .ant-menu-horizontal > .ant-menu-submenu-open, .ant-menu-horizontal > .ant-menu-item-selected, .ant-menu-horizontal > .ant-menu-submenu-selected {
            color: #fff;
            border-bottom: 2px solid #1890ff;
        }
        ul {
            width: 100%;
            @media screen and (max-width: 768px) {
                display: flex;
                justify-content: center;
            }
        }
        li{
            margin-right: 30px;
            @media screen and (max-width: 768px) {
                margin-right: 0px;
            }
        }
    }

    .menu-style {
        background-color: #00000000;
        position: absolute;
        top: -45px;
        color: rgba(255,255,255,.5);

        @media screen and (max-width: 768px) {
            top: -85px;
        }
    }

    .content-wrapper{
        width: 100%;
        margin-top: -350px;
        .content {
            margin-top: -30px;
            margin-bottom: 20px;
        }
    }
}



